<!--
 * @Description: 自定义tabbar
 * @Author: fht (863772124@qq.com)
 * @Date: 2021-09-07 10:24:52
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-08 19:34:10
 * @FilePath: \jiekuan-app\src\components\customizeTabbar\index.vue
-->
<template>
  <view>
    <u-tabbar
      class="my_tabbar"
      v-model="current"
      :list="list"
      :icon-size="54"
      :height="120"
      bg-color="#110D37"
      inactive-color="#fff"
      active-color="#fff"
      :border-top="false"
      @change="handleChange"
    ></u-tabbar>
  </view>
</template>

<script>
export default {
  props: {},
  watch() {},
  data() {
    return {
      list: [
        {
          iconPath: require('@/static/tabBar/home.png'),
          selectedIconPath: require('@/static/tabBar/home_active.png'),
          text: '首页',
          customIcon: false,
          pagePath: '/pages/index/index',
        },
        {
          iconPath: require('@/static/tabBar/star.png'),
          selectedIconPath: require('@/static/tabBar/star_active.png'),
          text: '动态',
          customIcon: false,
          pagePath: '/pages/trends/trends',
        },
        {
          iconPath: require('@/static/tabBar/chat.png'),
          selectedIconPath: require('@/static/tabBar/chat_active.png'),
          text: '消息',
          customIcon: false,
          pagePath: '/pages/message/message',
        },
        {
          iconPath: require('@/static/tabBar/user.png'),
          selectedIconPath: require('@/static/tabBar/user_active.png'),
          text: '我的',
          customIcon: false,
          pagePath: '/pages/center/center',
        },
      ],
      current: 1,
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  created() {},
  methods: {
    // 计算图片src地址
    computedImgSrc(name) {
      return this.$utils.qiniuImgs[name] || ''
    },
    /**
     * @author: liu (1427179517@qq.com)
     * @description: 切换选项
     * @param {Number} index 当前点击的索引
     * @param {String} pagePath 当前点击后要跳转的路径
     * @return {*}
     * @Date: 2021-09-08 15:19:25
     */
    handleChange(index) {
      console.log('handleChange===', index)
      this.current = index
      const pages = getCurrentPages()
      const pages_url = '/' + pages[0].route
      console.log('pages路径', pages[0].route)
      if (pages_url !== this.list[index].pagePath) {
        uni.reLaunch({
          url: this.list[index].pagePath,
        })
      }
      // if (index === 0) {
      //   if (pages_url === '/pages/center/center') {
      //     uni.reLaunch({
      //       url: this.list[0].pagePath,
      //     })
      //   }
      // } else {
      //   if (pages_url === '/pages/index/index') {
      //     uni.reLaunch({
      //       url: this.list[1].pagePath,
      //     })
      //   }
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
// 自定义底部
.tabBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 99;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  &-item {
    padding: 3rpx 0 15rpx;
    position: relative;
    min-height: 104rpx;
    height: 100%;
    text-align: center;
    &.active {
      .tabBar-item_text {
        color: #0e725f;
      }
    }
    &.midButton {
      .tabBar-item_img {
        position: absolute;
        width: 105rpx;
        height: 105rpx;
        top: -28rpx;
      }
    }
  }
  &-item_img {
    width: 54rpx;
    height: 54rpx;
    display: block;
    vertical-align: top;
  }
  &-item_text {
    color: #fff;
    font-size: 26rpx;
    line-height: 1;
    margin-top: 14rpx;
    width: 100%;
    text-align: center;
  }
}
</style>
